<template>
  <div class="dashboard-container">
    <el-row :gutter="32">
       <el-col><CalendarChart></CalendarChart></el-col>

    </el-row>

    <!-- 分类图-->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart ref="blogSortPie" @clickPie="clickBlogSortPie" v-if="showPieBlogSortChart" :value="blogCountByBlogSortList" :tagName="blogSortNameArray"></pie-chart>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart ref="blogTagPie" @clickPie="clickBlogTagPie" v-if="showPieBlogTagChart" :value="blogCountByBlogTagList" :tagName="blogTagNameArray"></pie-chart>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CalendarChart from "@/components/CalendarChart";
import PieChart from "@/components/PieChart";
import {
  getBlogCountByBlogSort, getBlogCountByBlogTag
} from "@/api/index";
export default {
  name: 'Dashboard',
  components: {
    CalendarChart, PieChart
  },
  data() {
    return {
      showPieBlogSortChart: false,
      showPieBlogTagChart: false,
      blogCountByBlogSortList: [],
      blogCountByBlogTagList: [],
      blogSortNameArray: [],
      blogTagNameArray: []
    }
  },
  computed: {
    ...mapGetters([
      'nickName', 'roles'
    ])
  },
  mounted() {
    this.getBlogCountByBlogSort();
    this.getBlogCountByBlogTag();
  },

  methods: {
    getBlogCountByBlogSort() {
      getBlogCountByBlogSort().then(res => {
        this.blogCountByBlogSortList = res.data;
        for (var a = 0; a < this.blogCountByBlogSortList.length; a++) {
          this.blogSortNameArray.push(this.blogCountByBlogSortList[a].name);
        }
        this.showPieBlogSortChart = true;
      })
    },
    getBlogCountByBlogTag() {
      getBlogCountByBlogTag().then(res => {
        this.blogCountByBlogTagList = res.data;
        for (var a = 0; a < this.blogCountByBlogTagList.length; a++) {
          this.blogTagNameArray.push(this.blogCountByBlogTagList[a].name);
        }
        this.showPieBlogTagChart = true;
      })
    },
    clickBlogSortPie() {

    },
    clickBlogTagPie() { }
  },
}
</script>

<style lang="scss" scoped>
.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
